<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- Vue模板语法有2大类：
        1.插值语法：功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

        2.指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件….…..）。
            举例：v-bind：href="xxx" 或 简写为 ：href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
            备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。 
    -->
    <div id="app">
        <h1>模板语法</h1>
        <hr/>

        <h1>指令语法</h1>
        <a href="https://www.baidu.com">百度一下</a>
        <a v-bind:href="url">{{name}}</a>
        <!-- v-bind:简写为: -->
        <a :href="url">QQ</a>
        
        <!-- data数据名冲突可以多层级书写 -->
        <h3>{{family.name}}</h3>
        <h3>{{family.age}}</h3>

    </div>


    <script>
        new Vue({
            el:"#app",
            data:{
                url:"https://www.qq.com",
                name:"qq",
                family:{
                    name:"liangyu",
                    age:21
                }
            }
        })
    </script>
</body>
</html>